<template>
  <view class="container">
    <image :src="imageUrl" mode="circle" style="width: 200rpx; height: 200rpx; margin: 30rpx auto; display: block;" v-if="imageUrl" />
    <button @click="chooseImage" type="default" style="margin-bottom: 20rpx;">选择图片显示</button>
    <button @click="previewImage" type="default" style="margin-bottom: 20rpx;">预览图片</button>
    <button @click="getImageInfo" type="default">获取图片信息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' // 存储选中图片路径
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0];
          console.log('选中图片路径：', res.tempFilePaths[0]);
        },
        fail: (err) => {
          console.error('选择图片失败：', err);
        }
      });
    },
    previewImage() {
      if (this.imageUrl) {
        uni.previewImage({
          urls: [this.imageUrl],
          current: this.imageUrl
        });
      } else {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
      }
    },
    getImageInfo() {
      if (this.imageUrl) {
        uni.getImageInfo({
          src: this.imageUrl,
          success: (info) => {
            uni.showModal({
              title: '图片信息',
              content: `宽度：${info.width}px\n高度：${info.height}px\n格式：${info.type}\n是否有动画：${info.animated}`,
              showCancel: false
            });
            console.log('图片信息：', info);
          },
          fail: (err) => {
            console.error('获取图片信息失败：', err);
          }
        });
      } else {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
}
</style>